<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="55%"
    title="关联商品"
    :dialog-style="{ top: '20px' }"
    :footer="null"
  >
    <vxe-grid
      resizable
      show-overflow
      highlight-hover-row
      keep-source
      row-id="id"
      :columns="column"
      :toolbar-config="toolbarConfig"
      :data="formData"
      :height="450"
      :scroll-y="{
        enabled: true,
        gt: 0,
      }"
    >
      <!-- 状态 -->
      <template #available_default="{ row }">
        <available-tag :available="row.available" />
      </template>
    </vxe-grid>
  </a-modal>
</template>

<script setup>
  import { getCurrentInstance, ref } from 'vue';
  import * as api from '@/api/base-data/make';
  import AvailableTag from '@/components/Tag/src/AvailableTag.vue';

  // this对象
  const instance = getCurrentInstance();

  const visible = ref(false);

  // 加载中
  const loading = ref(false);

  const props = defineProps({
    makeId: {
      type: String,
      required: true,
    },
  });

  const formData = ref({});

  const column = ref([
    { field: 'code', title: '商品编号', width: 120 },
    { field: 'name', title: '商品名称', minWidth: 140 },
    { field: 'skuCode', title: '商品SKU编号', width: 120 },
    { field: 'unitName', title: '单位', width: 80 },
    { field: 'spec', title: '规格', minWidth: 140 },
    { field: 'categoryName', title: '商品分类', width: 120 },
    { field: 'brandName', title: '商品品牌', width: 120 },
    { field: 'retailPrice', title: '零售价（元）', width: 100 },
    { field: 'available', title: '状态', width: 80, slots: { default: 'available_default' } },
  ]);

  const toolbarConfig = ref({
    zoom: false,
    refresh: false,
    custom: false,
    // 自定义左侧工具栏
    slots: {
      buttons: 'toolbar_buttons',
    },
  });

  const initFormData = () => {
    formData.value = [];
  };

  const loadFormData = () => {
    loading.value = true;
    api
      .getProductMake(props.makeId)
      .then((res) => {
        formData.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  };

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
    initFormData();
    loadFormData();
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
